<template>
  <div class="charts" width="100%">
    <div id="charts" style="width:100%;height:350px;"></div>
  </div>
</template>

<script>
import { getStatistics, getHot_cities } from "@/api/data.js";
export default {
  data() {
    return {
      title: {},
      Statistics: [],
      hot_cities: [],
      company_all: [],
      mychart: "",
    };
  },
  methods: {
    //企业名数组获取
    getStatistics_all() {
      this.Statistics.forEach((item) => {
        this.company_all.push(item.name);
      });
    },
  },
  created() {
    getStatistics().then((res) => {
      console.log("热门企业", res);
      this.Statistics = res.data.data;
      const myChart = this.$echarts.init(document.getElementById("charts"));
      this.myChart = myChart;
      this.getStatistics_all();
      let option = {
        color: ["#409EFF", "#F76137", "#F9B358"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 10,
          data: this.company_all,
        },
        title: {
          text: "整体数据",
          left: "100",
          top: "50",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.Statistics,
          },
        ],
      };

      myChart.setOption(option);
    });
    getHot_cities().then((res) => {
      console.log("热门城市", res);
      this.hot_cities = res.data.data;
    });
  },
  mounted() {},
};
</script>

<style lang="less"></style>
